<template>
    <ul class="commend-author-container">
        <li class="title">推荐推荐推荐作者作者</li>
        <li class="author-item-wrapper" v-for="item in authorList" :key="item.name">
            <div class="author-item">
                <img class="author-avatar" :src="item.avatar" alt="">
                <ul class="author-info">
                    <li>{{item.name}}</li>
                    <li class="profession">{{item.profession}}</li>
                </ul>
                <span class="article">{{item.num}}篇</span>
            </div>
            <p class="signature">{{item.signature}}</p>
        </li>
    </ul>
</template>

<script>
    export default {
        data () {
            return {
                authorList: [
                    {
                        avatar: 'https://img2.baidu.com/it/u=3423578282,1550589742&fm=26&fmt=auto&gp=0.jpg',
                        name: '1_bit',
                        profession: '算法',
                        num: '455',
                        signature: '李兰清的代码小屋，十多年编程经验。15-16年曾在网上直播，带领一批程序小白走上程序员之路。欢迎各位小白加我咨询我相关信息，迷茫的你会找到答案。'
                    },
                    {
                        avatar: 'https://img2.baidu.com/it/u=2639880015,3752617665&fm=15&fmt=auto&gp=0.jpg',
                        name: '冰 河',
                        profession: '系统安全',
                        num: '411',
                        signature: '基于最终消息可靠性的开源分布式事务框架mykit-transaction-message作者'
                    },
                    {
                        avatar: 'https://img0.baidu.com/it/u=234885306,2875616874&fm=26&fmt=auto&gp=0.jpg',
                        name: 'lexsaints',
                        num: '369',
                        profession: 'Python',
                        signature: 'Python领域优质创作者 网络安全工程师 Linux开发者 Windows域控Exchange架构师 Java开发者'
                    },
                    {
                        avatar: 'https://img0.baidu.com/it/u=3436455410,3135399299&fm=26&fmt=auto&gp=0.jpg',
                        name: '沉默王二',
                        num: '900',
                        profession: 'JAVA',
                        signature: '微信搜『沉默王二』，回复『Java』获取500本优质电子书'
                    },
                    {
                        avatar: 'https://img1.baidu.com/it/u=2669465948,2438487741&fm=26&fmt=auto&gp=0.jpg',
                        name: 'ZackSock',
                        num: '61',
                        profession: '后端',
                        signature: '王者之路，岂可顺矣？'
                    }
                ]
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "./src/common/scss/variable";
    @import "./src/common/scss/mixin";
   .commend-author-container {
       width: 100%;
       margin-bottom: 8px;
       padding: 12px 24px 12px 22px;
       box-sizing: border-box;
       border: 1px solid $border-color;
       border-radius: 20px;
       user-select: text;
       .title {
           margin-bottom: 17px;
           color: $font-gray;
           font-weight: 700;
           font-size: 14px
       }
       .author-item-wrapper {
           & + .author-item-wrapper {
               margin-top: 8px;
           }
           .author-item {
               display: grid;
               grid-template-columns: 55px 1fr minmax(30px, 50px);
               grid-column-gap: 11px;
               width: 100%;
               font-size: 14px;
               line-height: 21px;
               .author-avatar {
                   width: 55px;
                   height: 55px;
                   border-radius: 50%;
                   user-select: none;
               }
               .profession {
                   margin-top: 8px;
               }
               .article {
                   font-size: 13px;
                   color: rgb(159, 159, 159);
               }
           }
           .signature {
               @include no-wrap();
               margin-top: 8px;
               line-height: 21px;
               font-size: 14px;
               color: rgb(159, 159, 159);
           }
       }
   }
</style>
